<template>
<!--  用户行为日志页面-->
  <div class="page">
    <!-- 条件筛选 -->
    <div class="page_filter">
      <el-input v-model="form.operator" clearable placeholder="请输入用户名称"></el-input>
      <el-input v-model="form.operation" clearable placeholder="请输入行为名称"></el-input>
      <el-input v-model="form.url" clearable placeholder="请输入行为接口"></el-input>
      <el-select v-model="form.errFlag" clearable placeholder="请选择行为状态">
        <el-option v-for="item in errFlagList" :key="item.code" :label="item.name" :value="item.code">
        </el-option>
      </el-select>
      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
    </div>
    <div class="common_btnBox" >
      <i class="iconfont iconzongshu icon-size"></i>
      总数：{{form.total}}
    </div>
    <div class="page_main">

      <!-- table -->
      <el-table
        :data="tableList"
        border>
        <el-table-column
          label="序号"
          fixed
          width="80">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column prop="operator" label="行为用户" min-width="120"></el-table-column>
        <el-table-column prop="operation" label="行为名称" min-width="160"></el-table-column>
        <el-table-column prop="url" label="行为接口" min-width="200"></el-table-column>
        <el-table-column prop="params"  label="参数" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="method"  label="方法" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="time"  label="耗时" min-width="80" show-overflow-tooltip></el-table-column>
        <el-table-column label="行为时间" min-width="180" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.createTime | formatTimer}}</template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" min-width="80">
          <template slot-scope="scope">
            <el-button type="text" class="btn_edit" @click="showParam(scope.row.params)">查看参数</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-size="form.pageSize"
           :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"
        :total="form.total">
      </el-pagination>
    </div>
    <el-dialog title="行为参数" :visible.sync="isShowDialog" :close-on-click-modal="false" width="520px">
      <el-input
        type="textarea"
        :rows="25"
        v-model="param">
      </el-input>
      <!-- 操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-defalut" type="primary" @click="isShowDialog = false">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { syslogList } from '@/services/model/sys'
import Format from '@/utils/format'
export default {
  data () {
    return {
      param:'',
      isShowDialog:false,
      errFlagList:[
        {code:0,name:'异常'},
        {code:1,name:'正常'}
      ],
      form: {
        page: 1,
        pageSize: 10
      },
      tableList: [],

      currentRow: {}, // 新增数据
      defaultProps: {
        children: 'subMenu',
        label: 'name'
      },
    }
  },
  computed: {
  },
  filters: {
    // 时间格式化
    formatTimer (timer) {
      return Format(new Date(timer), 'yyyy-MM-dd hh:mm:ss')
    }
  },
  methods: {
    infoToJson(info) {
      info = info.replace(/ \+/g, '')
      info = info.replace(/[\r\n]/g, '')
      let parseJSON = JSON.parse(info)
      return JSON.stringify(parseJSON, null, 2)
    },
    showParam(params){
      this.isShowDialog = true
      this.param = this.infoToJson(params)
    },
    // 当前变化的节点
    // 获取当前的序号
    getIndex (index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1
      return param
    },
    // 分页大小改变
    handleSizeChange (val) {
      this.form.pageSize = val
      this.queryList()
    },

    // 当前页码改变
    handleCurrentChange (val) {
      this.form.page = val
      this.queryList()
    },
    // 处理删除
    async handleDelete (row) {
      let res = await roleDelete({ id: row.id })
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: '数据已删除'
        })
        this.queryList()
      }
    },
    async queryList () {
      // 由于在前端进行过滤，所以name不能传到后端
      let res = await syslogList(this.form)
      this.tableList = res.data?.records || []
      this.form.page = Number(res.data?.current)
      this.form.total = Number(res.data?.total)


    }
  },
  mounted () {
  },
  activated () {
    this.queryList()
  }
}
</script>

<style lang="less" scoped>
  .dialog_relate {
    .dialog_filter {
      display: flex;
      margin-bottom: 22px;
      .el-input {
        margin-right: 10px;
        width: 200px;
      }
    }
  }
  /deep/.tree_scroll .el-scrollbar__wrap {
    max-height: 50vh;
    height: 300px;
  }
  /deep/.role_tree {
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: #0DC26B;
      border-color: #0DC26B;
    }
    .el-checkbox__inner:hover {
      border-color: #0DC26B;
    }
  }
</style>
